<!--
author:        hejiyang <silentmanager@163.com>
date:          2024-11-18 20:06:07
component:     assigningPermissions
Copyright © YourCompanyName All rights reserved
-->

<template>
  <el-dialog
    :destroy-on-close="true"
    title="分配权限"
    v-model="isVisible"
    @close="handleClose"
    width="600px"
  >
    <FormComponent
      :rules="rules"
      style="margin-left: 80px; margin-top: 30px"
      :config="formConfig"
      ref="formRef"
      label-width="120px"
      label-position="left"
    />
    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
      <el-button type="primary" :loading="loading" @click="handleSave">确定</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch, defineProps, defineEmits } from 'vue'
import FormComponent from '@/components/FormComponent/index.vue'
import { CustomerTypeOptions } from '@/mock'
import { createCustomerLimitConfig, getByUserIdCustomerLimitConfig } from '@/api/user'
const message = useMessage()
// 定义组件的 props
interface Props {
  visible: boolean
  remarkId: number | undefined
}

// 获取 props 和 emits
const props = defineProps<Props>()
const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
  (e: 'success'): void // 添加 success 事件
}>()

// 局部状态变量，用于管理弹窗的可见性
const isVisible = ref<boolean>(props.visible)
const loading = ref(false)

// 关闭弹窗的处理函数
const handleClose = () => {
  isVisible.value = false // 设置局部状态
  emit('update:visible', false) // 通知父组件
  formRef.value?.setData({})
}

// 保存备注的处理函数
const handleSave = async () => {
  try {
    await formRef.value?.formRef?.validate()
    loading.value = true
    const res = await createCustomerLimitConfig({
      level: formRef.value?.formData.level.join(',') || [], //客户类型
      userIds: [props?.remarkId || 0], //用户id
      maxCount: formRef.value?.formData.maxCount, //数量
      onceCount: formRef.value?.formData.onceCount //单次数量
    })
    if (res.code === 0) {
      message.success('分配成功')
      emit('success') // 通知父组件
      handleClose() // 保存后关闭弹窗
    }
    loading.value = false
  } catch (e) {
    loading.value = false
    console.error(e)
  }
}
// 监视 props.visible 的变化，以更新局部状态
watch(
  () => props.visible,
  (newValue) => {
    isVisible.value = newValue
    if (props.remarkId) {
      getByUserIdCustomerLimitConfigFn()
    }
  }
)

// ===================== 表单  =====================
const formRef = ref<InstanceType<typeof FormComponent>>()
const formConfig = [
  {
    label: '客户类型',
    prop: 'level',
    type: 'select',
    options: {
      style: 'width: 240px',
      placeholder: '请选择客户类型',
      options: CustomerTypeOptions,
      multiple: true
    }
  },
  {
    label: '拥有客户上限',
    prop: 'maxCount',
    type: 'number',
    options: {
      style: 'width: 240px',
      placeholder: '请输入拥有客户上限',
      precision: '0',
      min: 0,
      max: 500
    }
  },
  {
    label: '单次数量上限',
    prop: 'onceCount',
    type: 'number',
    options: {
      style: 'width: 240px',
      placeholder: '请输入单次数量上限',
      precision: '0',
      min: 0,
      max: 500
    }
  }
]
const rules = {
  level: [{ required: true, message: '请选择客户类型', trigger: 'blur' }],
  maxCount: [{ type: 'number', required: true, message: '请输入拥有客户上限', trigger: 'blur' }],
  onceCount: [{ type: 'number', required: true, message: '请输入单次数量上限', trigger: 'blur' }]
}
const getByUserIdCustomerLimitConfigFn = async () => {
  try {
    const res = await getByUserIdCustomerLimitConfig({ userId: props.remarkId || 0 })
    formRef.value?.setData({
      level: res.level.split(',') || [],
      maxCount: res.maxCount,
      onceCount: res.onceCount
    })
  } catch (e) {
    console.error(e)
  }
}
</script>

<style scoped>
/* 您的样式 */
</style>
